import React, { useEffect, useState }  from 'react';
import '@antv/s2-react/dist/style.min.css';
import './index.css'
import { SheetComponent } from '@antv/s2-react';
import 'antd/es/cascader/style/index.css';

//S2 提供开箱即用的场景表组件 —— 趋势分析表
const Test1 = () => {
    const [dataCfg, setDataCfg] = useState({});
    useEffect(() => {
        getdata();
    }, []);
    const getdata = () => {
        fetch(
            'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json',
        ).then((res) => res.json()).then((dataCfg) => {
            setDataCfg(dataCfg)
        });
    }
    const s2DataConfig = {
        fields: {
          rows: ['province', 'city'],
          columns: ['type', 'sub_type'],
          values: ['number'],
        },
        meta: dataCfg.meta,
        data: dataCfg.data,
      };
    
    const s2Options = {
        width: 600,
        height: 480,
        hierarchyType: 'tree', // 树形结构
    };
    const sex = ['男', '女'];
      
    const PartDrillDown = {
        drillConfig: {//下钻菜单组件配置项
          dataSet: [//下钻数据源配置
            {
              name: '客户性别',
              value: 'sex',
              type: 'text',
            },
          ],
        },
  
        fetchData: (meta, drillFields) =>//点击下钻后的回调
          new Promise((resolve) => {
            const dataSet = meta.spreadsheet.dataSet;
            const field = drillFields[0];
            const rowDatas = dataSet.getMultiData(meta.query, true, true);
            const drillDownData = [];
            rowDatas.forEach((data) => {
                console.log(data)
              const { city, number, province, sub_type: subType, type } = data;
              const number0 = Math.ceil(Math.random() * (number - 50)) + 50;
              const number1 = number - number0;
              const dataItem0 = {
                city,
                number: number0,
                province,
                sub_type: subType,
                type,
                [field]: sex[0],
              };
              drillDownData.push(dataItem0);
              const dataItem1 = {
                city,
                number: number1,
                province,
                sub_type: subType,
                type,
                [field]: sex[1],
              };
  
              drillDownData.push(dataItem1);
            });
  
            resolve({
              drillField: field,//下钻维度 value 值
              drillData: drillDownData,//下钻的数据
            });
          }),
    };
    return (
        <div>
            <SheetComponent
            partDrillDown={PartDrillDown}
            adaptive={false}
            dataCfg={s2DataConfig}
            options={s2Options}
            />
        </div>
    );
}

export default Test1;
